<template>
  <refresh class="refresh" @refresh="onRefresh" :style="{height: refreshHeight + 'px'}" @pullingdown="onPullingDown" :display="refreshing ? 'show' : 'hide'">
    <div class="refresh-container" :style="{height: refreshHeight + 'px'}">
      <div class="refresh-indicator" :style="{transform: 'scale('+indicatorScale+')'}"></div>
    </div>
  </refresh>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/mixin";

  .refresh {
    &-container {
      width: 750px;
      align-items: center;
      justify-content: center;
      /*background-color: #000;*/
    }
    &-indicator {
      width: 45px;
      height: 45px;
      @include border(6px, solid, $brand-primary);
      transform: scale(0.2);
      border-radius: 50px;
    }
  }
</style>
<script>

module.exports = {
  props: {
    refreshing: {default: false},
    indicatorScale: {default: 0.2}
  },

  data () {
    return {
      refreshHeight: 100
    }
  },
  components: {},
  created () {
  },
  methods: {
    onRefresh (event) {
      this.$emit('refresh', event)
    },
    onPullingDown (event) {
      // this.refreshHeight = -event.pullingDistance
      this.$emit('pullingDown', event)
    }
  }
}
</script>
